<template>
	<div class="advDayAllDataMarket realTimeDataClass">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'> <i class="icon iconfont">&#xe7d8;</i>
				<span class="title1">当前位置/市场数据分析/</span>
				<span>{{title}}</span>
			</div>
		</div>
		<div class="right_main">
			<div class="list1">
				<div class="list1_title">
					<p>整体数据</p> 
					<div class="right_header_time">
						<div class="block">
							<span>选择日期范围：</span>
							<el-date-picker
								size='small'
								v-model="date"
								type="daterange"
								align="left"
								placeholder="选择日期范围"
								@change='dateChange'
								:picker-options="pickerOptions"></el-date-picker>
						</div>
					</div>
					<el-button type="primary" size="mini" class="excel"  @click="excel('All21','市场数据分析-广告投放数据-整体数据')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
						<i class="icon iconfont">&#xe7f0;</i>
						导出excel
					</el-button>
				</div>
				<div class="table1">
					<el-table :data="tableData21" border style="width: 100%" v-loading="loading" @sort-change="sortChange">
						<el-table-column v-for="(val,key) in tableHeaderAll21" :prop="val.prop" :key="key" :label="val.label" align="center" :width="val.width" :fixed="val.fixed"  sortable></el-table-column>
					</el-table>
					<div class="pages">
						<el-pagination
							@size-change="handleSizeChange1"
							@current-change="handleCurrentChange1"
							:current-page="page1.currentPage"
							:page-sizes="page1.pageSizes"
							:page-size="page1.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="page1.dataTotal">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>
		<div class="right_main">
			<div class="list1">
				<div class="list1_title">
					<p>分URL数据</p> 
					<div class="right_header_time">
						<div class="block">
							<span>选择日期范围：</span>
							<el-date-picker
								size='small'
								v-model="date2"
								type="daterange"
								align="left"
								placeholder="选择日期范围"
								@change='dateChange2'
								:picker-options="pickerOptions"></el-date-picker>
						</div>
					</div>
					<el-button type="primary" size="mini" class="excel"  @click="excel('All22','市场数据分析-广告投放数据-分URL数据')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
						<i class="icon iconfont">&#xe7f0;</i>
						导出excel
					</el-button>
				</div>
				<div class="table1">
					<el-table :data="tableData22" border style="width: 100%" v-loading="loading2" @sort-change="sortChange2">
						<el-table-column v-for="(val,key) in tableHeaderAll22" :prop="val.prop" :key="key" :label="val.label" align="center" :width="val.width" :fixed="val.fixed"  sortable></el-table-column>
					</el-table>
					<div class="pages">
						<el-pagination
							@size-change="handleSizeChange2"
							@current-change="handleCurrentChange2"
							:current-page="page2.currentPage"
							:page-sizes="page2.pageSizes"
							:page-size="page2.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="page2.dataTotal">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>
		<div class="right_main">
			<div class="list1">
				<div class="list1_title">
					<p>分渠道数据</p> 
					<div class="right_header_time">
						<div class="block">
							<span>选择日期范围：</span>
							<el-date-picker
								size='small'
								v-model="date3"
								type="daterange"
								align="left"
								placeholder="选择日期范围"
								@change='dateChange3'
								:picker-options="pickerOptions"></el-date-picker>
						</div>
					</div>
					<el-button type="primary" size="mini" class="excel"  @click="excel('All23','市场数据分析-广告投放数据-分渠道数据')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
						<i class="icon iconfont">&#xe7f0;</i>
						导出excel
					</el-button>
				</div>
				<div class="table1">
					<el-table :data="tableData23" border style="width: 100%" v-loading="loading3" @sort-change="sortChange3">
						<el-table-column v-for="(val,key) in tableHeaderAll23" :prop="val.prop" :key="key" :label="val.label" align="center" :width="val.width" :fixed="val.fixed"  sortable></el-table-column>
					</el-table>
					<div class="pages">
						<el-pagination
							@size-change="handleSizeChange3"
							@current-change="handleCurrentChange3"
							:current-page="page3.currentPage"
							:page-sizes="page3.pageSizes"
							:page-size="page3.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="page3.dataTotal">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>
		<div class="right_main">
			<div class="list1">
				<div class="list1_title">
					<p>分代理商数据</p> 
					<div class="right_header_time">
						<div class="block">
							<span>选择日期范围：</span>
							<el-date-picker
								size='small'
								v-model="date4"
								type="daterange"
								align="left"
								placeholder="选择日期范围"
								@change='dateChange4'
								:picker-options="pickerOptions"></el-date-picker>
						</div>
					</div>
					<el-button type="primary" size="mini" class="excel"  @click="excel('All24','市场数据分析-广告投放数据-分代理商数据')" :style='{"background": this.$store.getters.theme[0],"borderColor":this.$store.getters.theme[1]}'>
						<i class="icon iconfont">&#xe7f0;</i>
						导出excel
					</el-button>
				</div>
				<div class="table1">
					<el-table :data="tableData24" border style="width: 100%" v-loading="loading4" @sort-change="sortChange4">
						<el-table-column v-for="(val,key) in tableHeaderAll24" :prop="val.prop" :key="key" :label="val.label" align="center" :width="val.width" :fixed="val.fixed"  sortable></el-table-column>
					</el-table>
					<div class="pages">
						<el-pagination
							@size-change="handleSizeChange4"
							@current-change="handleCurrentChange4"
							:current-page="page4.currentPage"
							:page-sizes="page4.pageSizes"
							:page-size="page4.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="page4.dataTotal">
						</el-pagination>
					</div>
				</div>
			</div>
		</div>
		<a href="" :download="xlsxTitle+'.xlsx'" id="hf"></a>
	</div>
</template>
<style lang="stylus" rel="stylesheet/stylus" src="./advDayAllDataMarket.styl"></style>
<script src="./advDayAllDataMarket.js"></script>